$(function () {
    initCate();
    // 初始化富文本编辑器
    initEditor()

    // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)


    //点击显示文件上传
    $('#btnFile').click(function(){
        $('#coverFile').click();
    })

    //替换裁剪区域的图片
    $('#coverFile').change(function(){
        if(this.files.length == 0)return layer.msg('请选择图片');
        //如果选了图片，选中的图片就会到内存当中，我们可以想办法获取内存当中地址
        var imageURL = URL.createObjectURL(this.files[0]); //这个是h5提供的
        //$image这个是插件提供的
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', imageURL)  // 重新设置图片路径
            .cropper(options)      // 重新初始化裁剪区域   
    })


    var state = '已发布';
    $('#btn2').click(function(){
        state = '草稿';
        console.log(state)
    })



    //为表单添加提交事件，用formData收集表单数据
    $('#form-pub').submit(function(e){
        e.preventDefault();
        var fd = new FormData(this);//标题 内容 分类
        // fd.forEach(function(value,key){
        //     console.log(value,key);
        // })
        fd.append('state',state);//文章状态


        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布 画画 操作图片 类似ps的效果
                width: 400,
                height: 280
            })
            .toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象 文件是二进制 blob类型 
                // 得到文件对象后，进行后续的操作
                fd.append('cover_img',blob);//封面
                // $.ajax它是jq为了我们方便写ajax封装的一个函数（方法），我们很多原生来写代码，不用写
                // xhr.setRequestHeader('Content-Type','application/x-www....')
                // xhr.send('a=1&b=2')
                // 文件类型的数据 一个一个发
                $.ajax({
                    method:'post',
                    url:'/my/article/add',
                    data:fd,
                    processData:false,
                    contentType:false,
                    success:function(res){
                        // console.log(res)
                        if(res.status != 0)return layer.msg('发布失败');
                        location.href = '/article/art-list.html';//跳转到文章列表页
                    }
                })
            })


        
    })
})

function initCate() {
    $.ajax({
        method: 'get',
        url: '/my/article/cates',
        success: function (res) {
            console.log(res);
            var str = template('cate-tpl', res)
            $('[name="cate_id"]').html(str);
            layui.form.render('select'); //刷新select选择框渲染
        }
    })
}